import * as React from 'react';
import { observer } from 'mobx-react';
import { Form, Input, Col, Button } from 'antd';

import { SearchInput, SearchInputProps } from '../../../components/SearchInput';
import { StandardPageModel, ICategory, ICategoryOptions } from '../../../../model/content/pages/standard/PageModel';

const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 14 },
};

const tailFormItemLayout = {
    wrapperCol: {
        span: 14,
        offset: 6,
    },
};

export interface ContentPaneProps extends ICategory {
    addBanner(position: number);
    deleteBanner(position: number);
    addTopic(position: number);
    deleteTopic(position: number);
    addEvent(position: number);
    deleteEvent(position: number);
    fetchAdsOptions(name: string);
    fetchBannerOptions(name: string);
    fetchTopicOptions(name: string);
    fetchEventOptions(name: string);
    updateBanner(position: number, id: string);
    updateTopic(position: number, id: string);
    updateEvent(position: number, id: string);
    updateAds(id: string);
    bannerOptions: ICategoryOptions[];
    topicOptions: ICategoryOptions[];
    eventOptions: ICategoryOptions[];
    adsOptions: ICategoryOptions[];
    onSave();
}

@observer
export class ContentEditorPane extends React.Component<ContentPaneProps, {}> {

    render() {
        var {props} = this;

        return <Form horizontal>
            <Form.Item
                {...formItemLayout}
                label="广告位">
                <SearchInput
                    value={props.ads.name}
                    options={props.adsOptions}
                    placeholder="请输入广告位名称查询并选择"
                    onChange={(name: string) => props.fetchAdsOptions(name)}
                    onSelect={(id: string) => props.updateAds(id)} />
            </Form.Item>

            <FormItem
                name="Banner"
                extra="最多5张Banner图"
                options={props.bannerOptions}
                list={props.banners}
                onAdd={props.addBanner}
                onDelete={props.deleteBanner}
                onChange={props.fetchBannerOptions}
                onUpdate={props.updateBanner}
                placeholder="请输入Banner名称查询并选择" />

            <FormItem
                name="专题"
                extra="最多4个专题"
                options={props.topicOptions}
                list={props.topics}
                onAdd={props.addTopic}
                onDelete={props.deleteTopic}
                onChange={props.fetchTopicOptions}
                onUpdate={props.updateTopic}
                placeholder="请输入专题名称查询并选择" />

            <FormItem
                name="活动"
                extra="至少选择4个活动"
                required
                options={props.eventOptions}
                list={props.events}
                onAdd={props.addEvent}
                onDelete={props.deleteEvent}
                onChange={props.fetchEventOptions}
                onUpdate={props.updateEvent}
                placeholder="请输入专题名称查询并选择" />

            <Form.Item {...tailFormItemLayout}>
                <Button type="primary" size="large" onClick={props.onSave}>保存</Button>
            </Form.Item>
        </Form>;
    }
}

interface SelectionProps {
    name: string;
    extra?: string;
    required?: boolean;
    list: ICategoryOptions[];
    placeholder: string;
    onAdd(index: number);
    onDelete(index: number);
    onChange(name: string);
    onUpdate(index: number, id: string);
    options: ICategoryOptions[];
}

@observer
class FormItem extends React.Component<SelectionProps, {}> {

    render() {
        var {name, list, placeholder, onAdd, onDelete, onUpdate, onChange, options, extra, required} = this.props;
        return <Form.Item
            {...formItemLayout}
            required={required}
            extra={extra}
            label={name}>{list.map((item, index) =>
                <Input.Group size="large" key={index}>
                    <Col span={8}>
                        <SearchInput
                            value={item.name}
                            options={options}
                            onChange={(name: string) => onChange(name)}
                            onSelect={(id: string) => onUpdate(index, id)}
                            placeholder={placeholder} />
                    </Col>
                    <Col span={4}>
                        <Button shape="circle" icon="plus" onClick={() => { onAdd(index + 1) }} />
                        {list.length > 1 && <Button shape="circle" icon="delete" onClick={() => onDelete(index)} />}
                    </Col>
                </Input.Group>)}
        </Form.Item>
    }
}
